<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Skeleton Text - Basic</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Skeleton Text</ion-title>
          <ion-buttons slot="primary">
            <ion-button onClick="toggleSkeleton()">Toggle</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <div id="data">
          <div class="ion-padding">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac eros est. Cras iaculis pulvinar arcu non
            vehicula. Fusce at quam a eros malesuada condimentum. Aliquam tincidunt tincidunt vehicula.
          </div>

          <ion-list>
            <ion-list-header>
              <ion-label> Data </ion-label>
            </ion-list-header>
            <ion-item>
              <ion-avatar slot="start">
                <img src="/src/components/avatar/test/avatar.svg" />
              </ion-avatar>
              <ion-label>
                <h3>Normal text</h3>
                <p>Lorem ipsum dolor sit amet, consectetur</p>
                <p>adipiscing elit.</p>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-thumbnail slot="start">
                <img src="/src/components/thumbnail/test/thumbnail.svg" />
              </ion-thumbnail>
              <ion-label>
                <h3>Normal text</h3>
                <p>Lorem ipsum dolor sit amet, consectetur</p>
                <p>adipiscing elit.</p>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-icon name="call" slot="start"></ion-icon>
              <ion-label>
                <h3>Normal text</h3>
                <p>Lorem ipsum dolor sit amet, consectetur</p>
                <p>adipiscing elit.</p>
              </ion-label>
            </ion-item>
          </ion-list>
        </div>

        <div id="skeleton">
          <div class="ion-padding custom-skeleton">
            <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
            <ion-skeleton-text></ion-skeleton-text>
            <ion-skeleton-text style="width: 88%"></ion-skeleton-text>
            <ion-skeleton-text style="width: 70%"></ion-skeleton-text>
            <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
          </div>

          <ion-list>
            <ion-list-header>
              <ion-label>
                <ion-skeleton-text style="width: 20%"></ion-skeleton-text>
              </ion-label>
            </ion-list-header>
            <ion-item>
              <ion-avatar slot="start">
                <ion-skeleton-text></ion-skeleton-text>
              </ion-avatar>
              <ion-label>
                <h3>
                  <ion-skeleton-text style="width: 50%"></ion-skeleton-text>
                </h3>
                <p>
                  <ion-skeleton-text style="width: 80%"></ion-skeleton-text>
                </p>
                <p>
                  <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
                </p>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-thumbnail slot="start">
                <ion-skeleton-text></ion-skeleton-text>
              </ion-thumbnail>
              <ion-label>
                <h3>
                  <ion-skeleton-text style="width: 50%"></ion-skeleton-text>
                </h3>
                <p>
                  <ion-skeleton-text style="width: 80%"></ion-skeleton-text>
                </p>
                <p>
                  <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
                </p>
              </ion-label>
            </ion-item>
            <ion-item>
              <ion-skeleton-text style="width: 27px; height: 27px" slot="start"></ion-skeleton-text>
              <ion-label>
                <h3>
                  <ion-skeleton-text style="width: 50%"></ion-skeleton-text>
                </h3>
                <p>
                  <ion-skeleton-text style="width: 80%"></ion-skeleton-text>
                </p>
                <p>
                  <ion-skeleton-text style="width: 60%"></ion-skeleton-text>
                </p>
              </ion-label>
            </ion-item>
          </ion-list>
        </div>

        <ion-list>
          <ion-list-header>
            <ion-label> Animated </ion-label>
          </ion-list-header>
          <ion-item>
            <ion-avatar slot="start">
              <ion-skeleton-text animated></ion-skeleton-text>
            </ion-avatar>
            <ion-label>
              <h3>
                <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
              </h3>
              <p>
                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
              </p>
              <p>
                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
              </p>
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-thumbnail slot="start">
              <ion-skeleton-text animated></ion-skeleton-text>
            </ion-thumbnail>
            <ion-label>
              <h3>
                <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
              </h3>
              <p>
                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
              </p>
              <p>
                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
              </p>
            </ion-label>
          </ion-item>
          <ion-item>
            <ion-skeleton-text style="width: 27px; height: 27px" slot="start" animated></ion-skeleton-text>
            <ion-label>
              <h3>
                <ion-skeleton-text animated style="width: 50%"></ion-skeleton-text>
              </h3>
              <p>
                <ion-skeleton-text animated style="width: 80%"></ion-skeleton-text>
              </p>
              <p>
                <ion-skeleton-text animated style="width: 60%"></ion-skeleton-text>
              </p>
            </ion-label>
          </ion-item>
        </ion-list>

        <div style="border-radius: 50%; height: 50px; width: 50px">
          <ion-skeleton-text></ion-skeleton-text>
        </div>

        <ion-skeleton-text style="width: 40px; height: 50px"></ion-skeleton-text>
      </ion-content>
    </ion-app>

    <style>
      #data {
        display: none;
      }

      #skeleton {
        display: block;
      }

      .custom-skeleton ion-skeleton-text {
        line-height: 13px;
      }

      .custom-skeleton ion-skeleton-text:last-child {
        margin-bottom: 5px;
      }
    </style>

    <script>
      function toggleSkeleton() {
        const skeletonEl = document.getElementById('skeleton'),
          skeletonStyle = window.getComputedStyle(skeletonEl),
          skeletonDisplay = skeletonStyle.getPropertyValue('display');
        const dataEl = document.getElementById('data'),
          dataStyle = window.getComputedStyle(dataEl),
          dataDisplay = dataStyle.getPropertyValue('display');

        document.getElementById('skeleton').style.display = skeletonDisplay === 'none' ? 'block' : 'none';
        document.getElementById('data').style.display = dataDisplay === 'none' ? 'block' : 'none';
      }
    </script>
  </body>
</html>
